<script setup>
import { reactive, ref, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRouter } from "vue-router";
import { orderCreate, orderPay, getOrderPayStatus } from '@/utils/api'
import QrcodeVue from 'qrcode.vue'
import { ElMessage } from 'element-plus'
const router = useRouter();
const data = reactive({
    qrCode: '', //二维码链接
    query: router.currentRoute.value.query, //购物车订单预览商品的id   cart_id
})
const tyIndex = ref(2) //支付宝支付
const timer = ref('') //支付宝支付
onBeforeUnmount(() => {
    clearInterval(timer.value)
})
onBeforeMount(() => {
    // 购物车创建订单

    if (router.currentRoute.value.query.sn) {

        // 订单主页待支付进入此页面
        console.log(router.currentRoute.value.query)
        timer.value = setInterval(() => {
            getOrderPayStatus({ order_id: data.query.order_id }).then(res => {
                if (res.code == 200) {
                    if (res.data.status == 1) {
                        ElMessage.success('支付成功')
                        router.push({ path: '/order/OrderHome' })
                        localStorage.setItem('leftactive', 1)
                        clearInterval(timer)
                    }
                }
            })
        }, 2000)
        orderPay({ sn: data.query.sn, pay_type: data.query.pay_type, money: data.query.real_price }).then(res => {
            if (res.code == 200) {
                data.qrCode = res.data.param.prePayTn
                console.log(data.qrCode)
            }
        })
    } else {
        orderCreate(Object.assign(data.query, { pay_type: tyIndex.value })).then(res => {
            if (res.code == 200) {

                orderPay({ sn: res.data.sn, pay_type: res.data.pay_type, money: data.query.totalPrice }).then(res => {
                    if (res.code == 200) {
                        data.qrCode = res.data.param.prePayTn

                    }
                })
                timer.value = setInterval(() => {
                    getOrderPayStatus({ order_id: res.data.order_id }).then(res => {
                        if (res.code == 200) {
                            if (res.data.status == 1) {
                                ElMessage.success('支付成功')
                                router.push({ path: '/order/OrderHome' })
                                localStorage.setItem('leftactive', 1)
                                clearInterval(timer)
                            }
                        }
                    })
                }, 2000)
            }
        })
    }

})

</script>

<template>
    <div class="wrapCenter">
        <div class="top flex">
            <img src="../../assets/logo.png" style="width: 150px;height: 60px;" alt="">
            <span class="fontS20 co3">收银台</span>
        </div>
        <div class="goods  fontS16 co3" style="line-height: 24px;">
            <!-- <div class="g_left " style="display: flex;font-weight: 500;">
                <div>商品信息:</div>
                <div>
                   {{ data.query.produceName }}
                </div>
            </div> -->
            <div style="text-align: right;">
                <p class="fontS16 co3" style="font-weight: 500;">订单金额：
                    <span class="fontS20 homeRed">¥</span>
                    <span class="fontS24 homeRed" style="font-weight: 600;">{{
                        data.query.sn ? data.query.real_price :
                            data.query.totalPrice
                    }}</span>
                </p>
            </div>
        </div>
        <div class="pay_type">
            <el-radio-group v-model="tyIndex">4
                <div class="p_t_li" @click="ischeck(2)" :class="tyIndex == 2 ? 'active' : ''">
                    <el-radio :label="2" size="large">
                        <div class="flexJBC">
                            <div class="flex">
                                <img src="../../assets/Image/zfbpay.png" alt="" style="margin-left: 40px;">
                                <span class="fontS16 co3" style="margin-left: 20px;">支付宝支付</span>
                            </div>
                            <div>
                                <span v-if="tyIndex == 2">
                                    <span class="co3 fontS16">支付：</span>
                                    <span class="fontS20 homeRed">￥</span>
                                    <span class="fontS22 homeRed" style="font-weight: 600;">{{
                                        data.query.sn ? data.query.real_price : data.query.totalPrice
                                    }}</span>
                                </span>
                            </div>
                        </div>
                    </el-radio>
                </div>
            </el-radio-group>
        </div>
        <div class="center" style="margin-top:100px" v-if="data.qrCode">
            <qrcode-vue :value="data.qrCode" style="width:200px;height:200px"></qrcode-vue>
        </div>
    </div>
</template>


<style lang="less" scoped>
.btn {
    width: 250px;
    font-size: 20px;
    color: white;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #DD2131;
    margin: 100px auto;
}

:deep(.el-radio-group) {
    display: block;
}

:deep(.el-radio--large) {
    width: 100%;
}

:deep(.el-radio__label) {
    width: 100%;
}

.active {
    box-sizing: border-box;
    border: 2px solid #dd2131 !important;
}

.pay_type {
    padding: 40px;
    box-sizing: border-box;

    .p_t_li {
        padding: 20px;
        box-sizing: border-box;
        border: 2px solid transparent;
    }
}
</style>
